<template>
	<view class="index2 flex-column">
		<view style="position: relative">
			<image src="@/static/mine/minebg.png" style="width: 100%; height: 500rpx"></image>
			<view style="position: absolute; top: 0; width: 100%; height: 500rpx">
				<u-navbar bgColor="rgba(0,0,0,0)" :fixed="false">
					<view slot="left" class="align-center">
						<view class="align-end">
							<view style="font-weight: 600; font-size: 48rpx; color: #ffffff">Hi,欢迎回来</view>
						</view>
						<view class="align-center" style="margin-left: 100rpx">
							<image @click="$tools.navigite('./detail')" src="@/static/jidi/jd1.png" style="width: 42rpx; height: 40rpx"></image>
							<image src="@/static/jidi/jd2.png" style="width: 34rpx; height: 40rpx; margin-left: 40rpx"></image>
						</view>
					</view>
				</u-navbar>
				<view class="flex-between1" style="padding: 66rpx 32rpx 0">
					<view>
						<view style="font-weight: 300; font-size: 24rpx; color: #ffffff; text-align: center">住宿人数</view>
						<view style="font-weight: bold; font-size: 48rpx; color: #ffffff; text-align: center">{{ obj.useCount }}</view>
					</view>
					<view>
						<view style="font-weight: 300; font-size: 24rpx; color: #ffffff; text-align: center">空余铺位</view>
						<view style="font-weight: bold; font-size: 48rpx; color: #ffffff; text-align: center">{{ obj.totalCount - obj.useCount }}</view>
					</view>
					<view>
						<view style="font-weight: 300; font-size: 24rpx; color: #ffffff; text-align: center">今日入住</view>
						<view style="font-weight: bold; font-size: 48rpx; color: #ffffff; text-align: center">{{ obj.toDayIn }}</view>
					</view>
					<view>
						<view style="font-weight: 300; font-size: 24rpx; color: #ffffff; text-align: center">今日退宿</view>
						<view style="font-weight: bold; font-size: 48rpx; color: #ffffff; text-align: center">{{ obj.toDayOut }}</view>
					</view>
				</view>
				<view style="padding: 32rpx 32rpx 0">
					<u-line-progress :percentage="Math.round((obj.useCount / obj.totalCount) * 100)" activeColor="#63C802" inactiveColor="#fff" height="64">
						<text class="u-percentage-slot">{{ Math.round((obj.useCount / obj.totalCount) * 100) }}%</text>
					</u-line-progress>
					<view v-if="obj.totalCount == 0" style="font-weight: 400; font-size: 24rpx; color: #ffffff; text-align: center; margin-top: 20rpx">
						总铺位0，入住率0%，还不错哟～
					</view>
					<view v-else style="font-weight: 400; font-size: 24rpx; color: #ffffff; text-align: center; margin-top: 20rpx">
						总铺位{{ obj.totalCount }}，入住率{{ Math.round((obj.useCount / obj.totalCount) * 100) }}%，还不错哟～
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 32rpx">
			<view class="flex-around" style="border-bottom: 1rpx solid #eeeeee; padding: 34rpx 0">
				<view
					class="text1"
					:class="{ text2: current == 0 }"
					@click="
						current = 0;
						list = [];
						getlist();
					"
				>
					入住登记
				</view>
				<view
					class="text1"
					:class="{ text2: current == 1 }"
					@click="
						current = 1;
						list = [];
						getlist();
					"
				>
					离店登记
				</view>
			</view>
		</view>
		<!-- <view class="flex" style="padding: 32rpx">
			<view class="text3" :class="{ text4: current1 == 1 }" @click="current1 = 1">全部</view>
			<view class="text3" :class="{ text4: current1 == 2 }" @click="current1 = 2" style="margin-left: 60rpx">未办理</view>
			<view class="text3" :class="{ text4: current1 == 3 }" @click="current1 = 3" style="margin-left: 60rpx">已办理</view>
		</view> -->
		<view class="flex" style="padding: 0 32rpx 20rpx">
			<!-- <view class="align-center" style="padding: 12rpx 18rpx; border-radius: 4rpx; border: 1rpx solid #eeeeee">
				<text style="font-weight: 400; font-size: 24rpx; color: #666666; margin-right: 14rpx">岗位类别</text>
				<image src="@/static/index/bottom@2x.png" style="width: 22rpx; height: 14rpx"></image>
			</view> -->
			<view @click="dateshow1 = true" class="align-center" style="margin-right: 20rpx; padding: 12rpx 18rpx; border-radius: 4rpx; border: 1rpx solid #eeeeee">
				<text style="font-weight: 400; font-size: 24rpx; color: #666666; margin-right: 14rpx">{{ inDate || '入住时间' }}</text>
				<image src="@/static/index/bottom@2x.png" style="width: 22rpx; height: 14rpx"></image>
				<u-datetime-picker :show="dateshow1" v-model="value1" mode="date" @confirm="dateconfirm" @cancel="dateshow1 = false"></u-datetime-picker>
			</view>
			<view class="flex-between1" style="padding: 12rpx 18rpx; border-radius: 4rpx; border: 1rpx solid #eeeeee">
				<input
					v-model="phone"
					@confirm="
						list = [];
						getlist();
					"
					type="text"
					placeholder="电话/姓名"
					style="font-weight: 400; font-size: 24rpx; color: #666666"
				/>
				<image src="@/static/index/serach1.png" style="width: 24rpx; height: 24rpx"></image>
			</view>
		</view>
		<view style="background: #f5f6fa; padding: 20rpx 32rpx; flex: 1">
			<view class="flex" v-for="(item, index) in list" :key="index" style="padding: 20rpx; background-color: #fff; margin-bottom: 20rpx">
				<view style="margin-right: 28rpx">
					<image :src="item.userInfo.head" style="width: 196rpx; height: 240rpx" mode="aspectFill"></image>
				</view>
				<view style="flex: 1">
					<view class="flex-between1">
						<view class="align-center">
							<view style="font-weight: 600; font-size: 32rpx; color: #333333">{{ item.userInfo.name }}</view>
							<u-icon @click.stop.native="$tools.navigite('./jianli', item.userId)" name="file-text" color="#1365F9" size="44"></u-icon>
						</view>
						<view class="align-center">
							<view
								@click="$tools.playphone(item.userInfo.phone)"
								class="flex-center1"
								style="margin-right: 20rpx; width: 56rpx; height: 56rpx; background: #1365f9; border-radius: 8rpx"
							>
								<u-icon name="phone-fill" color="#fff" size="40"></u-icon>
							</view>
							<view
								v-if="current == 0"
								@click="
									show = true;
									obj1 = item;
									userInfo = item.userInfo;
									room = item.room;
								"
								class="flex-center1"
								style="width: 126rpx; height: 56rpx; background: #1365f9; border-radius: 8rpx; font-size: 24rpx; color: #ffffff"
							>
								登记入住
							</view>
							<view
								v-if="current == 1"
								@click="
									show = true;
									obj1 = item;
									userInfo = item.userInfo;
									room = item.room;
								"
								class="flex-center1"
								style="width: 126rpx; height: 56rpx; background: #1365f9; border-radius: 8rpx; font-size: 24rpx; color: #ffffff"
							>
								办理退房
							</view>
						</view>
					</view>
					<view style="font-weight: 300; font-size: 24rpx; color: #999999; padding: 14rpx 0">
						<text v-if="item.userInfo.sex == 0">女</text>
						<text v-if="item.userInfo.sex == 1">男</text>
						| {{ item.userInfo.age }}岁
					</view>
					<view class="flex" style="margin-bottom: 30rpx">
						<view style="margin-right: 20rpx; padding: 8rpx 20rpx; font-weight: 400; background: #f8f8f8; border-radius: 8rpx; font-size: 24rpx; color: #666666">
							{{ item.userInfo.height || '' }}cm
						</view>
						<view style="margin-right: 20rpx; padding: 8rpx 20rpx; font-weight: 400; background: #f8f8f8; border-radius: 8rpx; font-size: 24rpx; color: #666666">
							{{ item.userInfo.weight || '' }}kg
						</view>
					</view>
					<view style="font-weight: 400; font-size: 24rpx; color: #333333">入住日期：{{ item.inDate }}</view>
				</view>
			</view>
			<view v-if="!list.length" style="text-align: center; padding-top: 100rpx">暂无数据~</view>
		</view>
		<movable-area class="movable-area">
			<movable-view class="movable-view flex-column flex-center1" :x="x" :y="y" :position="position" direction="all" @change="onChange">
				<!-- <view>
					<u-icon name="share" size="46" color="#fff"></u-icon>
					<text style="font-size: 24rpx; color: #ffffff; text-align: center">分享</text>
				</view> -->
				<view @click.native.stop="$tools.navigite('./feedback')">
					<u-icon name="file-text" size="46" color="#fff"></u-icon>
					<text style="font-size: 24rpx; color: #ffffff; text-align: center">反馈</text>
				</view>
			</movable-view>
		</movable-area>
		<u-popup :show="show" mode="bottom" round="20">
			<view style="padding: 32rpx; max-height: 80vh; overflow: auto">
				<view v-if="current == 0" style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">登记入住</view>
				<view v-if="current == 1" style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">办理退房</view>
				<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 24rpx">劳动者信息</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>真实姓名:</text>
					<text>{{ userInfo.name }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>性别:</text>
					<text>{{ userInfo.sex == 1 ? '男' : '女' }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>出生日期:</text>
					<text>{{ userInfo.birthDate }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>年龄:</text>
					<text>{{ userInfo.age }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>身份证号:</text>
					<text>{{ userInfo.idcard }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>婚姻状况:</text>
					<text>{{ userInfo.marital }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>现住址:</text>
					<text>{{ userInfo.address }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>联系电话:</text>
					<text>{{ userInfo.phone }}</text>
				</view>
				<view style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">住宿信息</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>房型名称:</text>
					<text>{{ room.name }}</text>
				</view>
				<view style="margin-bottom: 40rpx" v-if="current == 0">
					<view style="margin-bottom: 20rpx">*床位名称:</view>
					<view class="flex-wrap">
						<view
							@click="current2 = index"
							v-for="(item, index) in room.bedList"
							:key="index"
							class="text1"
							:class="{ text2: current2 == index }"
							style="margin-right: 20rpx"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>开始时间:</text>
					<text>{{ obj1.inDate }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>离店时间:</text>
					<text>{{ obj1.outDate }}</text>
				</view>
				<!-- <view class="flex-between1" style="margin-bottom: 40rpx">
					<text>备注:</text>
					<text>11</text>
				</view> -->
				<view class="flex-between1">
					<view
						@click="close"
						class="flex-center1"
						style="font-size: 32rpx; color: #1365f9; width: 220rpx; height: 96rpx; background: #ffffff; border-radius: 8rpx; border: 2rpx solid #1365f9"
					>
						取消
					</view>
					<view
						v-if="current == 0"
						@click="ruzhu(obj1.id, room.bedList[current2])"
						class="flex-center1"
						style="width: 426rpx; height: 96rpx; background: #1365f9; border-radius: 8rpx; font-size: 32rpx; color: #ffffff"
					>
						入住
					</view>
					<view
						v-if="current == 1"
						@click="tuifang(obj1.id)"
						class="flex-center1"
						style="width: 426rpx; height: 96rpx; background: #1365f9; border-radius: 8rpx; font-size: 32rpx; color: #ffffff"
					>
						退房
					</view>
				</view>
			</view>
		</u-popup>
		<Tabbar2 :value="0"></Tabbar2>
	</view>
</template>

<script>
export default {
	data() {
		return {
			x: 375,
			y: 500,
			position: 4,
			x1: 0,
			x2: 0,
			y1: 0,
			y2: 0,
			move: {
				x: 0,
				y: 0
			},
			show: false,
			current: 0,
			current1: 0,
			current2: 0,
			obj: {},
			obj1: {},
			userInfo: {},
			room: {},
			dateshow1: false,
			value1: Number(new Date()),
			inDate: '',
			phone: '',
			pageNum: 1,
			pageSize: 20,
			isLastPage: false,
			list: []
		};
	},
	onShow() {
		this.list = [];
		this.init();
		this.getsf();
		this.getWindowWidth();
	},
	onReachBottom() {
		if (this.isLastPage) return;
		this.pageNum++;
		this.getlist();
	},
	methods: {
		init() {
			this.$request('front/home/head').then((res) => {
				console.log(res, '头部');
				this.obj = res.obj;
			});
			this.getlist();
		},
		getlist() {
			const data = {
				status: this.current,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				phone: this.phone,
				inDate: this.inDate
			};
			this.$request('front/home/getList', data).then((res) => {
				this.list = [...this.list, ...res.obj.list];
				console.log(res.obj.list, '列表');
				this.isLastPage = res.obj.isLastPage;
			});
		},
		getsf() {
			this.$request('front/user/getUserRole', { type: 2 }).then((res) => {
				console.log(res, '身份');
				if (!res.obj) {
					this.$tools.navigite('./jidi');
				}
			});
		},

		getWindowWidth() {
			let _this = this;
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					// setTimeout(() => {
					// 	if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
					// 	if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
					// 	if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
					// 	if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
					// 	this.move.x = this.x;
					// 	this.move.y = this.y;
					// }, 1000);
				}
			});
		},
		onChange(e) {
			this.move.x = e.detail.x;
			this.move.y = e.detail.y;
		},
		onTouchend() {
			this.x = this.move.x;
			this.y = this.move.y;
			setTimeout(() => {
				if (this.move.x < this.x2 / 2) this.x = this.x1;
				else this.x = this.x2;
			}, 100);
		},
		ruzhu(id, badId) {
			if (!badId) return this.$tools.toast('无床位');
			this.$request('front/home/success', { id, badId: badId.id }).then((res) => {
				console.log(res, '入住');
				if (res.code == 0) {
					this.$tools.toast('操作成功');
					this.show = false;
					setTimeout(() => {
						this.list = [];
						this.init();
					}, 1000);
				}
			});
		},
		tuifang(id) {
			this.$request('front/home/outLogin', { id }).then((res) => {
				console.log(res, '退房');
				if (res.code == 0) {
					this.$tools.toast('操作成功');
					this.show = false;
					setTimeout(() => {
						this.list = [];
						this.init();
					}, 1000);
				}
			});
		},
		dateconfirm(value) {
			this.inDate = this.$u.timeFormat(value.value, 'yyyy-mm-dd');
			this.dateshow1 = false;
			this.list = [];
			this.getlist();
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="less" scoped>
.movable-area {
	height: calc(100vh - var(--status-bar-height));
	width: 750rpx;
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	pointer-events: none;
	z-index: 9999999;
}
.movable-view {
	width: 88rpx;
	height: 180rpx;
	padding: 42rpx 0;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 44rpx;
	opacity: 1;
	position: relative;
	z-index: 99999;
	pointer-events: auto;
}
.index2 {
	min-height: 100vh;
}
.text1 {
	font-weight: 300;
	font-size: 32rpx;
	color: #333333;
}
.text2 {
	font-weight: 600;
	font-size: 32rpx;
	color: #1365f9;
}
.text3 {
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
}
.text4 {
	font-size: 28rpx;
	color: #333333;
}
.u-percentage-slot {
	padding: 1px 5px;
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	margin-right: -5px;
}
</style>
